import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class TopMenu extends StatefulWidget {
  const TopMenu({super.key});

  @override
  State<TopMenu> createState() => _TopMenuState();
}

class _TopMenuState extends State<TopMenu> {
  final List<String> items = [
    'Item1',
    'Item2',
    'Item3',
    'Item4',
    'Item5',
    'Item6',
    'Item7',
    'Item8',
  ];
  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          Container(
            padding: EdgeInsets.only(left: 22.w),
            height: 48.w,
            width: 412.w,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(14.w))),
            child: Row(
              children: [
                Icon(
                  Icons.search_rounded,
                  size: 24.w,
                  color: Color(0xfff0A1629),
                ),
                SizedBox(
                  width: 360.w,
                  height: 48.w,
                  child: TextField(
                    onChanged: (res) {},
                    onSubmitted: (res) {},

                    textAlignVertical: TextAlignVertical.center,
                    style: const TextStyle(
                        fontSize: 14, fontWeight: FontWeight.w300),
                    //输入框的样式
                    decoration: const InputDecoration(
                        counterText: "",
                        contentPadding: EdgeInsets.only(left: 5, right: 20),
                        border: OutlineInputBorder(borderSide: BorderSide.none),
                        hintText: "搜索",
                        hintStyle: TextStyle(fontSize: 14, color: Colors.grey)),
                  ),
                )
              ],
            ),
          ),
          const Spacer(flex: 1),
          Container(
            margin: EdgeInsets.only(right: 24.w),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(14.w))),
            padding: EdgeInsets.all(12.w),
            child: Image.asset(
              "images/notifications.png",
              width: 24.w,
              height: 24.w,
            ),
          ),
          SizedBox(
            width: 220.w,
            height: 48.w,
            child: DropdownButtonHideUnderline(
              child: DropdownButton2<String>(
                isExpanded: true,
                hint: Row(
                  children: [
                    Image.asset(
                      "images/avatar_icon.png",
                      width: 30.w,
                    ),
                    SizedBox(
                      width: 5.w,
                    ),
                    Expanded(
                      child: Text(
                        'Select Item',
                        style: TextStyle(
                          fontSize: 16.w,
                          color: Color(0xff0A1629),
                        ),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ],
                ),
                items: items
                    .map((String item) => DropdownMenuItem<String>(
                          value: item,
                          child: Row(
                            children: [
                              Image.asset(
                                "images/avatar_icon.png",
                                width: 30.w,
                              ),
                              SizedBox(
                                width: 5.w,
                              ),
                              Expanded(
                                child: Text(
                                  item,
                                  style: TextStyle(
                                    fontSize: 16.w,
                                    color: Color(0xff0A1629),
                                  ),
                                  overflow: TextOverflow.ellipsis,
                                ),
                              ),
                            ],
                          ),
                        ))
                    .toList(),
                value: selectedValue,
                onChanged: (value) {
                  setState(() {
                    selectedValue = value;
                  });
                },
                buttonStyleData: ButtonStyleData(
                  padding: const EdgeInsets.only(left: 14, right: 14),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(14),
                    border: Border.all(
                      color: Colors.white,
                    ),
                    color: Colors.white,
                  ),
                  // elevation: 2,// 阴影
                ),
                iconStyleData: const IconStyleData(
                  icon: Icon(
                    Icons.arrow_drop_down,
                  ),
                  iconSize: 24,
                  iconEnabledColor: Color(0xff0A1629),
                  iconDisabledColor: Color(0xff0A1629),
                ),
                dropdownStyleData: DropdownStyleData(
                  maxHeight: 200,
                  width: 220.w,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(14),
                    color: Colors.white,
                  ),
                  offset: const Offset(0, -10),
                  // scrollbarTheme: ScrollbarThemeData(
                  //   radius: const Radius.circular(40),
                  //   thickness: MaterialStateProperty.all(6),
                  //   thumbVisibility: MaterialStateProperty.all(true),
                  // ),
                ),
                // menuItemStyleData: const MenuItemStyleData(
                //   height: 40,
                //   padding: EdgeInsets.only(left: 14, right: 14),
                // ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
